<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>jQuery.lately.js</title>

<style type='text/css'>
    @import url(http://fonts.googleapis.com/css?family=Rosario);

    body{
        width: 80%;
        margin:0 auto;
        color: white;
        font: 400 .9em sans-serif;
        text-shadow: 0px 1px 0px black;
        background-color: #222;
        background-image: url();}

    h1, h2, h3 {font-family: 'Rosario', sans-serif;}

    hr {
        margin:10px 0; padding:0;
        height:0;
        border: none;
        border-top: 1px solid #000;
        border-bottom: 1px solid #444;
    }

    code {
        background: #1a1a1a;
        margin: 10px 0;
        padding: 5px 10px;
        display: inline-block;
        box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset;
        color: white;
        font: 400 .9em Consolas, Courier, monospace;
    }
    code > span.red {
        color: #e0a;
    }
    code > span.blue {
        color: #0ae;
    }

    ul {list-style:none}

    img {
        float:left;
        width: 45%;
        height: auto;
        margin: 1%;
        background: white;
        border: 1px solid #111;
        box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.4);
    }
    img[data-src] {display:block}
</style>

</head>
<body>
    <h1>jQuery.latley.js</h1>

    <hr>

    <h2>Usage</h2>

    <p>
    The default usage is pretty simple:<br>
    Include your images, replace the <code>src</code>-attribute with an image-placeholder and use the <code>data-src</code>-attribute for your real image.</p>
    <code>&lt;img <span class="blue">src=</span><span class="red">"holder.png"</span> <span class="blue">data-src=</span><span class="red">"img.jpg"</span>></code>
    <h3>Fallback</h3>
    <p>If you need a fallback for those who have javascript disabled, just add a <code>noscript</code>-tag after your image:</p>
    <code>&lt;noscript> &lt;img <span class="blue">src=</span><span class="red">"img.png"</span>> &lt;/noscript></code>
    <code>img[<span class="blue">data-src</span>] {<span class="blue">display:</span><span class="red">none</span>}</code>

    <p>Now you've just to initialize "lately"</p>
    <code>$(<span class="red">"img"</span>).show().lately();</code>

    <hr>

    <h2>Option</h2>
    <p>By default, images are only loaded and "unveiled" when user scrolls to
    them and they became visible on the screen.</p>
    <p>If you want your images to load earlier than that, lets say 200px before
    they get visible, you just have to:</p>
    <ul>
        <li><code><span class="blue">container:</span> window</code> - The scrolling container</li>
        <li><code><span class="blue">gapX:</span> 0</code> - The horizontal threshold</li>
        <li><code><span class="blue">gapY:</span> 0</code> - The vertical threshold</li>
    </ul>

    <hr>
    <h2>Demo</h2>
    <img data-src="http://lorempixel.com/640/480/city/1" src="">
    <img data-src="http://lorempixel.com/640/480/city/2" src="">
    <img data-src="http://lorempixel.com/640/480/city/3" src="">
    <img data-src="http://lorempixel.com/640/480/city/4" src="">
    <img data-src="http://lorempixel.com/640/480/city/5" src="">
    <img data-src="http://lorempixel.com/640/480/city/6" src="">
    <img data-src="http://lorempixel.com/640/480/city/7" src="">

    <script src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
    <script src='jquery.lately.js'></script>
    <script>
        $("img[data-src]").show().lately();
    </script>
</body>
</html>